import { EyeInvisibleOutlined, EyeTwoTone } from "@ant-design/icons";
import { Input, Space, Button,message } from "antd";
import React, { useState,useEffect } from "react";
import { updataPassword } from '../../api/index'
import store from "../../store/store";
function Modify() {
  const [size] = useState("large");
  const [oldpassword, setOldpassword] = useState("")
  const [newpassword,setNewpassword]=useState("")
  const [quepassword, setQuepassword] = useState("")
  useEffect(()=>{
    
  },[])
  const heanderKeep=()=>{
    if (newpassword!=quepassword) {
      message.info("新密码与确认密码不相同")
      return
    }
    if(newpassword.length<6) {
      message.info("新密码至少需要6位数字或字母或特殊字符")
      return
    }
    updataPassword({ oldpassword, newpassword, username: localStorage.getItem("token") }).then(data=>{
      if (data.msg=="修改成功"){
        message.success("密码修改成功！")
      }else{
        message.info("你输入的密码错误！")
      }
    })
    setOldpassword("")
    setNewpassword("")
    setQuepassword("")
  }
  return (
    <div className="Modify">
      <Space direction="vertical">
        <Input.Password placeholder="旧密码" maxLength="10" value={oldpassword} onChange={(e) => { setOldpassword(e.target.value)}}/>
        <Input.Password placeholder="新密码" maxLength="10" value={newpassword} onChange={(e) => { setNewpassword(e.target.value) }} />
        <Input.Password
          placeholder="确认新密码"
          maxLength="10"
          value={quepassword}
          onChange={(e) => { setQuepassword(e.target.value) }}
        />
      </Space>
      <br />
      <br />
      <Button type="primary" size={size} onClick={heanderKeep}>
        保存
      </Button>
    </div>
  );
}

export default Modify;
